<template>
  <div class="login" v-loading="loading">
    <div class="login_content center">
      <div class="input_box">
          <input class="overflow" v-model="loginForm.account" type="text" placeholder="請輸入賬號">
          <input class="overflow" v-model="loginForm.password" type="password" placeholder="請輸入密碼" @keyup.enter="submitForm('loginForm')">
          <button class="pointer" @click="submitForm('loginForm')">登錄</button>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";

export default {
  data() {
    return {
      loginForm: {
        account: "",
        password: ""
      },
      loading: false
    };
  },
  methods: {
    submitForm(formName) {
      this.loading = true;

      this.axios
        .post("users/login", {
          account: this.loginForm.account,
          password: md5(this.loginForm.password)
        })
        .then(res => {
          this.loading = false;

          if (res.data.code === "1000") {
            window.localStorage.setItem("token", res.data.data.token);
            window.localStorage.setItem("account", res.data.data.account);
            this.$router.push({
              path: "/"
            });
          } else {
            this.$message.error(res.data.message);
          }
        });
      
    }
  }
};
</script>

<style lang="scss">
@import "../assets/css/common.scss";
.login {
  width: 100%;
  height: 100%;
  background: $bg;

  .login_content {
    top: 40%;
  }
  .logo {
    margin: 0 auto;
    width: 360px;
  }
  .input_box {
    min-width: 800px;
    font-size: 0;
    margin-top: 80px;

    input {
      height: 50px;
      width: 300px;
      border: 1px solid #ccc;
      outline: 0;
      border-radius: $radius;
      font-size: 18px;
      padding: 0 10px 0 40px;
      color: $mtColor;
      background: {
        color: transparent;
        repeat: no-repeat;
        size: 22px;
        position: 10px center;
      }
      transition: all $transitionTime;
      &:focus,
      &:hover {
        border: {
          color: $mtColor;
        }
      }
      &:first-of-type {
        margin-right: 18px;
        background-image: url("../assets/images/account_w.png");
        &:focus,
        &:hover {
          background-image: url("../assets/images/account_g.png");
        }
      }
      &:nth-of-type(2) {
        margin-right: 32px;
        background-image: url("../assets/images/pwd_w.png");
        &:focus,
        &:hover {
          background-image: url("../assets/images/pwd_g.png");
        }
      }
    }
    button {
      width: 150px;
      height: 50px;
      background-color: $mtColor;
      vertical-align: top;
      border-radius: $radius;
      font-size: 22px;
      color: #fff;
      transition: all $transitionTime;
      &:hover {
        background-color: $mtColor / 0.85;
      }
    }
  }
}
</style>
